﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }

        let backView  = new FCView();
        backView.dock = "fill";
        backView.backColor = "rgb(0,0,0)";
        addView(backView, gPaint);

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown = function (view, mp, buttons, clicks, delta) {
            onMouseDownDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove = function (view, mp, buttons, clicks, delta) {
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                //放大显示
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                    //缩小显示
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp = function (view, mp, buttons, clicks, delta) {
            onMouseUpDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        let iconImage = null;
        let loadImage = false;

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            onPaintDefault(view, paint, clipRect);
            if(!loadImage){
                let image = new Image();
                image.onload = function () {
                    iconImage = image;
                    invalidate(gPaint);
                };
                image.src = "../images/taode.png";
                loadImage = true;
            }else{
                if(iconImage){
                    paint.drawImage(iconImage, 5, 5, 80, 80);
                }
                let font = "Default,20";
                let font2 = "Default,15";
                let text = "陶德 wx:suade1984";
                let tSize = paint.textSize(text, font);
                paint.drawText(text, "rgb(200,200,200)", font, 100, (80 - tSize.cy) / 2);
                paint.drawText("经济学专业(文科)", "rgb(200,200,200)", font2, 10, 100);
                paint.drawText("工作经历:大智慧龙软、东方财富、东吴证券、德意志银行", "rgb(200,200,200)", font2, 10, 140);
                paint.drawText("市场销售、产品负责人、CTO/研发部百夫长、交易员", "rgb(200,200,200)", font2, 10, 180);
                paint.drawText("量化对冲专家、股票经纪人、期货顾问、高端社群运营", "rgb(200,200,200)", font2, 10, 220);
                paint.drawText("当前工作内容:", "rgb(200,200,200)", font2, 10, 260);
                paint.drawText("1.国产基础框架和软件研发", "rgb(200,200,200)", font2, 10, 300);
                paint.drawText("2.人工智能多设备联合机器人", "rgb(200,200,200)", font2, 10, 340);
                paint.drawText("3.农村工作和生活+自媒体", "rgb(200,200,200)", font2, 10, 380);
                paint.drawText("4.金融分析和量化科技(合规)", "rgb(200,200,200)", font2, 10, 420);
                paint.drawText("5.科学工作和养生爱好者", "rgb(200,200,200)", font2, 10, 460);
                paint.drawText("工作地点:江阴市峭岐镇袁家庄南部农田", "rgb(200,200,200)", font2, 10, 500);
                paint.drawText("注:本人是农村独立开发者，所有信息以官网介绍为准", "rgb(200,200,200)", font2, 10, 540);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaintBorder = function (view, paint, clipRect) {
            onPaintBorderDefault(view, paint, clipRect);
        };

        /*
        * 更新布局的实现方法
        * views:视图集合
         */
        gPaint.onUpdateView = function (views) {
            updateViewDefault(views);
        }

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvas.width = document.documentElement.clientWidth;
            canvas.height = document.documentElement.clientHeight;
            scaleCanvas(gPaint);
            updateViewDefault(gPaint.views);
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();

        };

        //注册事件
        addMouseDownEvent(canvas, gPaint, onMouseDown);
        addMouseMoveEvent(canvas, gPaint, onMouseMove);
        addMouseWheelEvent(canvas, gPaint, onMouseWheel);
        addMouseUpEvent(canvas, gPaint, onMouseUp, onClick);
        addTouchBeginEvent(canvas, gPaint, onTouchBegin);
        addTouchMoveEvent(canvas, gPaint, onTouchMove);
        addTouchEndEvent(canvas, gPaint, onTouchEnd, onClick);
        updateViewDefault(gPaint.views);
        updateViewDefault(gPaint.views);
        //刷新界面
        invalidate(gPaint);
    </script>
</body>
</html>
